<template>
  <div>
    <el-container style="height: 750px; border: 1px solid #eee">
      <el-aside style="width: 200px; background-color: #303133">
        <span>BUCTCODER</span>
        <el-menu
            background-color="#303133"
            text-color="#fff"
            active-text-color="#fffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>
              <router-link to="/index">学生基本信息</router-link>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <router-link to="/recent">近期比赛统计</router-link>
            </template>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <router-link to="/atcoderrank">各类排行榜单</router-link>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <el-form ref="form":model="form" :rules="rules" label-position="labelPosition" style="color: black" label-width="100px">
            <h1 style="text-align:center"><i class="el-icon-edit"></i></h1>

            <!--学号输入栏-->
            <el-form-item class="stuNo" prop="stuNo" label="学号">
              <el-input type="text" placeholder="请输入学号" v-model="form.stuNo"></el-input>
            </el-form-item>

            <!--姓名输入栏-->
            <el-form-item class="name" prop="name" label="姓名">
              <el-input type="name" placeholder="请输入姓名" v-model="form.name"></el-input>
            </el-form-item >

            <!--班级输入栏-->
            <el-form-item class="className" prop="className" label="班级">
              <el-input type="className" placeholder="请输入班级" v-model="form.className"></el-input>
            </el-form-item >

            <!--AcID输入栏-->
            <el-form-item class="AcID" prop="AcID" label="AcID">
              <el-input type="AcID" placeholder="请输入AcID" v-model="form.AcID"></el-input>
            </el-form-item >

            <!--CfID输入栏-->
            <el-form-item class="CfID1" prop="CfID1" label="CfID1">
              <el-input type="CfID1" placeholder="请输入CfID1" v-model="form.CfID1"></el-input>
            </el-form-item >
            <el-form-item class="CfID2" prop="CfID2" label="CfID2">
              <el-input type="CfID2" placeholder="请输入CfID2" v-model="form.CfID2"></el-input>
            </el-form-item >
            <el-form-item class="CfID3" prop="CfID3" label="CfID3">
              <el-input type="CfID3" placeholder="请输入CfID3" v-model="form.CfID3"></el-input>
            </el-form-item >

            <!--添加按钮-->
            <el-form-item class="button" align="center">
              <el-button type="primary" @click="register">添加</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "add",
  data(){
    return{
      labelPosition: 'top',
      form:{
        //用v-model绑定监听，将输入的字符串赋值给变量
        stuNo:'',
        name:'',
        className:'',
        AcID:'',
        CfID1:'',
        CfID2:'',
        CfID3:''
      },
      rules:{
        stuNo: [
          { required: true, message: '请输入学号', trigger: 'blur' },
        ],
        name:[
          { required:true,message:'请输入姓名',trigger:'blur'},
        ],
        className:[
          { required:true,message:'请输入班级',trigger:'blur'},
        ],
        AcID:[
          { required:true,message:'请输入AcID',trigger:'blur'},
        ],
        CfID1:[
          { required:true,message:'请输入CfID1',trigger:'blur'},
        ]
      }
    }
  },

  methods:{
    //注册按钮 使用axios发起请求
    register(){
      this.$axios
          .post('student/register', {
            stuid: this.form.stuNo,
            stuname: this.form.name,
            stuclass: this.form.className,
            stuAcid: this.form.AcID,
            stuCfid: this.form.CfID1,
            stuCfid1: this.form.CfID2,
            stuCfid2: this.form.CfID3
          })
          .then(function (response){
            console.log(response);
            alert('添加成功')
          })
          .catch(function(error){
            console.log(error);
            alert('添加失败')
          })
    }
  }
}
</script>